<script lang="ts" setup>
import { QForm, type FormItemRows } from '@meetjs/element-plus-kit'
import { type FormRules } from 'element-plus'
import { addType, updateType } from '@/api/interface/list'
import type { ListParams } from '@/api/interface/list/type'
import type { IGetDictsRes } from '@/api/system/dict/type'

const props = defineProps<{
	methods: IGetDictsRes
	provides: { label: string; value: string }[]
}>()
const emits = defineEmits<{
	refresh: []
}>()
const visible = ref(false)
const loading = ref(false)
const title = ref<'新增接口' | '修改接口'>('新增接口')
// TODO:后续优化类型
const formRef = ref()
const baseFormData: ListParams = {
	name: '',
	providerId: '',
	path: '',
	requestMethod: '',
	requestParam: '',
	responseParam: '',
	remark: '',
	contactPhone: '',
	contactEmail: '',
	provideName: ''
}
const dialogFormValue = ref<ListParams>({ ...baseFormData })
const dialogOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '接口名称',
		prop: 'name'
	},
	{
		type: 'select',
		label: '业务系统',
		prop: 'providerId',
		options: []
	},
	{
		type: 'input',
		label: '接口路径',
		prop: 'path'
	},
	{
		type: 'select',
		label: '请求方式',
		prop: 'requestMethod',
		options: []
	},
	{
		type: 'textarea',
		label: '接口入参',
		prop: 'requestParam'
	},
	{
		type: 'textarea',
		label: '接口出参',
		prop: 'responseParam'
	},
	{
		type: 'textarea',
		label: '接口描述',
		prop: 'remark'
	},
	{
		type: 'input',
		label: '联系电话',
		prop: 'contactPhone'
	},
	{
		type: 'input',
		label: '联系邮箱',
		prop: 'contactEmail'
	}
])

const rules = reactive<FormRules<{ [k: string]: any }>>({
	name: [
		{
			required: true,
			message: '请输入接口名称'
		}
	],
	providerId: [
		{
			required: true,
			message: '请选择业务系统'
		}
	],
	path: [
		{
			required: true,
			message: '请输入接口路径'
		}
	],
	requestMethod: [
		{
			required: true,
			message: '请选择请求方式'
		}
	],
	requestParam: [
		{
			required: true,
			message: '请输入接口入参'
		}
	],
	responseParam: [
		{
			required: true,
			message: '请输入接口出参'
		}
	]
})

const init = (type: 'add' | 'edit', editForm?: ListParams) => {
	visible.value = true
	title.value = type === 'add' ? '新增接口' : '修改接口'

	if (editForm) {
		dialogFormValue.value = { ...editForm }
	} else {
		dialogFormValue.value = { ...baseFormData }
	}
	setTimeout(() => {
		formRef.value?.clearValidate()
	})
}

const submit = () => {
	formRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			try {
				loading.value = true
				const apiFunc = title.value === '新增接口' ? addType : updateType
				await apiFunc({ ...dialogFormValue.value })
				const message = title.value === '新增接口' ? '新增成功' : '修改成功'
				ElMessage.success(message)
				visible.value = false
				emits('refresh')
			} finally {
				loading.value = false
			}
		}
	})
}

watchEffect(() => {
	dialogOptions.value[1].options = props.provides
	dialogOptions.value[3].options = props.methods
})

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="800px"
	>
		<QForm
			ref="formRef"
			label-width="120px"
			:model="dialogFormValue"
			:form-options="dialogOptions"
			:rules="rules"
		/>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="submit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>

<style lang="scss" scoped></style>
